<template>
  <div class="home">
    <p>
      <router-link :to="{ name: 'Admin' }">Admin</router-link>
      |
      <router-link :to="{ name: 'About' }">About</router-link>
    </p>
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <div>插槽：&lt;slot>&lt;/slot> 分发内容</div>
    <hello-world :msg="msgInfo">
      <!-- 父级模板里的所有内容都是在父级作用域中编译的 -->

      <h1 style="color: red">my hello</h1>
      <!-- <span>{{ desc }}</span> -->
      <!-- <template v-slot:default="scope"> -->
      <!-- <template v-slot:default="{ msg }"> -->
      <!-- <template v-slot="{ msg }"> -->
      <template #default="{ msg }">
        <span>{{ msg }}</span>
      </template>
      <!-- v-slot 只能添加在 <template> -->
      <!-- <template v-slot:first> -->
      <!-- @ : # -->
      <template #first>
        <h2>第一个slot的内容123</h2>
      </template>
      <h2 slot="second">第二个slot的内容</h2>
      <!-- <template v-slot:user="scope"> -->
      <template slot="user" slot-scope="scope">
        <!-- {{ scope }} -->
        {{ scope.user.lastName }}
      </template>
    </hello-world>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  data() {
    return {
      desc: "描述的信息",
      msgInfo: "home传入的msg",
    };
  },
  components: {
    HelloWorld,
  },
  // beforeRouteEnter(to, from, next) {
  // 	console.log("to:", to);
  // 	console.log("form:", from);
  // 	next()
  // }
};
</script>
